<template>
    <div class="xiao_xi">
        <div class="shang">
            <div class="title">
                <img @click="go_back" class="fan_hui" src="../lmx/image/return.png" alt="">
                <span>消息</span>
            </div>
            <div class="mo_kuai">
                <div class="kuai_side">
                    <div @click="hu_dong" class="kuai_one">
                        <div class="tu"></div>
                        <span class="zi">互动消息</span>
                    </div>
                    <div @click="wu_liu" class="kuai_two">
                        <div class="tu"></div>
                        <span class="zi">交易物流</span>
                    </div>
                    <div @click="xi_tong" class="kuai_san">
                        <div class="tu"></div>
                        <span class="zi">系统消息</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="xia">
            <div @click="chat" class="one_hang">
                <div class="head_tu_side">
                    <img class="head_tu" src="../lmx/image/666.jpeg" alt="">
                </div>
                <div class="right">
                    <div class="user">
                        <span class="ni_cheng">手工客19118273</span>
                        <span class="time">2022-09-30</span>
                    </div>
                    <div class="tig"><span class="zi">51616</span></div>
                </div>
            </div>
            <div class="one_hang"></div>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import {useRouter} from "vue-router"
const router = useRouter()

function go_back(){
    router.go(-1)
}
function hu_dong (){
    router.push({
        name:'hu_dong',
    })
    console.log('222')
}
function wu_liu(){
    router.push({
        name:'wu_liu',
    })
    console.log('333')
}
function xi_tong(){
    router.push({
        name:'xi_tong',
    })
    console.log('444')
}
function chat(){
    console.log('888')
}
</script>

<style scoped>
*{
    padding: 0;
    margin: 0;
}
.xiao_xi{
    width: 100%;
    height: 100%;
    /* background-color: antiquewhite; */
    display: flex;
    flex-direction: column;
    align-items: center;
}  
.shang{
    width: 95%;
    height: 120px;
    display: flex;
    flex-direction: column;
} 
.title{
    width: 100%;
    height: 40px;
    /* background-color: blue; */
    position: relative;
    margin: 0 auto;
}
.fan_hui{
    width:25px ;
    height: 25px;
    margin-top: 7.5px;
    margin-bottom: 7.5px;
    margin-left: 5px;
}
.title>span{
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -10.4px;
    margin-left: -16px;
}
.mo_kuai{
    width: 100%;
    flex: 1;
    /* background-color: brown; */
    display: flex;
    justify-content: center;
    align-items: center;
}
.kuai_side{
    width: 80%;
    height: 80%;
    /* background-color: blue; */
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.kuai_one,
.kuai_two,
.kuai_san{
    width: 50px;
    height: 100%;
    /* background-color: aqua; */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    
}
.kuai_one>.tu,
.kuai_two>.tu,
.kuai_san>.tu{
    width: 40px;
    height: 40px;
    border-radius: 40%;
    background-color: #38b9fa;
    background-image: url('../lmx/image/hu_dong.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 25px 25px ;
}
.kuai_two>.tu{
    background-color: #fdb10b;
    background-image: url('../lmx/image/wu_liu.png');
}
.kuai_san>.tu{
    background-color: #30c289;
    background-image: url('../lmx/image/ling_sheng.png');
}
.kuai_one>.zi,
.kuai_two>.zi,
.kuai_san>.zi{
    font-size: 12px;
}
.xia{
    width: 95%;
    flex: 1;
    border-top: 7px solid #f4f4f4;
    /* background-color: blueviolet; */
    display: flex;
    flex-direction: column;
}
.one_hang{
    width: 100%;
    height: 56px;
    margin-top: 7px;
    /* background-color: #30c289; */
    display: flex;
    justify-content: space-between;
    align-items: center;
} 
.head_tu_side{
    width: 50px;
    height: 50px;
    /* background-color: #fdb10b; */
    display: flex;
    justify-content: center;
    align-items: center;
}
.head_tu{
    width: 40px;
    height: 40px;
    border-radius: 50%;
}
.right{
    width: 286px;
    height: 50px;
    /* background-color:#38b9fa; */
    display: flex;
    flex-direction: column;
}
.right>.user{
    width: 100%;
    /* flex: 1; */
    /* background-color: blue; */
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.right>.user>.ni_cheng{
    font-size: 15px;
    margin-top: 1px;
    margin-bottom: 1px;
}
.right>.user>.time{
    font-size: 10px;
    color: #c8c9cc;
}

.right>.tig{
    width: 100%;
    flex: 1;
    /* background-color: red; */
    display: flex;
    flex-direction: column;
    justify-content: end;
}
.right>.tig>.zi{
    color:#c8c9cc ;
}
</style>